<template>
  <div>
    <!-- 企业评估 -->
    <!-- 开发环境 -->
    <!-- <iframe src="http://192.168.2.100:19090/ntqypg" frameborder="0" width="100%"
            scrolling="yes" height="800"></iframe> -->
    <!-- 生产环境 https://xyjg.nantong.cn  政府内网-->
    <!-- <iframe src="https://xyjg.nantong.cn/ntqypg/index" frameborder="0" width="100%"
            scrolling="yes" height="800"></iframe> -->
    <!-- 生产环境 192.168.181.92  东站 外网访问-->
    <!-- <iframe src="https://www.cidata.top/ntqypg/index" frameborder="0" width="100%"
            scrolling="yes" height="800"></iframe> -->
    <!-- 生产环境 192.168.181.91 东站 内网访问-->
    <!-- <iframe src="http://192.168.181.91/ntqypg/index" frameborder="0" width="100%"
                scrolling="yes" height="800"></iframe> -->
    <!-- 地方征信演示 -->
    <!-- <iframe src="http://192.168.2.100/ntqypg/" frameborder="0" width="100%"
                scrolling="yes" height="800"></iframe> -->
    <iframe
      :src="assessUrl"
      frameborder="0"
      width="100%"
      scrolling="yes"
      height="800"
    ></iframe>
    <div style="display: none">
      <el-row>
        <el-col :span="18" class="col-shadw">
          <el-input
            v-model="queryTxt"
            style="width: 50%"
            placeholder="请输入需要检索的公司名称(默认查询所有企业)"
            suffix-icon="el-icon-search"
          >
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button
            size="small"
            round
            plain
            class="fr"
            :style="{
              color: `${$store.getters.color}`,
              'border-color': `${$store.getters.color}`,
            }"
            >申报核查
          </el-button>
          <el-button
            size="small"
            round
            plain
            class="fr"
            :style="{
              color: `${$store.getters.color}`,
              'border-color': `${$store.getters.color}`,
            }"
            >模板下载
          </el-button>
        </el-col>
      </el-row>
      <el-card class="mt-20">
        <div class="query-container">
          <el-row v-for="(k, i) in qList" :key="i">
            <el-col class="label" :span="3">{{ k.label }} :</el-col>
            <el-col :span="21">
              <el-tag
                class="pointer mr-10"
                size="medium"
                v-for="(t, d) in k.value"
                :key="d"
                :effect="
                  focusTag.findIndex((d) => d.val == t) > -1 ? 'dark' : 'plain'
                "
                @click="clickTag(k, t)"
              >
                {{ t }}
              </el-tag>
            </el-col>
          </el-row>
        </div>
        <div class="query-footer">
          <div>
            总共查询出<b>10</b>家企业 <span class="u">点击下载</span>
            <span class="r">清空条件</span>
          </div>
        </div>
      </el-card>

      <el-card class="mt-20" :body-style="{ padding: '0px' }">
        <div>
          <div class="c_label"></div>
          <div style="height: 20rem">
            <BarChart :cData="cData" id="pf" height="100%" width="100%" />
          </div>
        </div>
      </el-card>

      <el-card class="mt-20">
        <div class="label">经办人信息</div>
        <div class="tab_body mt-20">
          <div class="tab">
            <div class="tab_title">
              <span class="b_txt">NO·1 余姚申达贸易有限公司</span>
              <span class="n_txt">龙头企业排名：1</span>
              <span class="n_txt">高成长企业排名：1</span>
              <span class="n_txt">单项隐形冠军企业企业排名：1</span>
            </div>
            <div class="tab_det">
              <span class="n_txt">法人代表：马春苗</span>
              <span class="n_txt">统一社会信用代码：219739182093802313</span>
              <span class="n_txt">成立年限：2014年</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import BarChart from "@/components/Charts/BarChart";
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      assessUrl:'',
      queryTxt: "",
      focusTag: [],
      qList: [
        {
          label: "主营收入(万)",
          value: ["全部", "0-2000", "2001-5000", "5001-20000", "20000以上"],
        },
        {
          label: "成立年限",
          value: [
            "全部",
            "成立1年内",
            "成立1-5年内",
            "成立6-10年内",
            "成立11-15年内",
            "成立16年以上",
          ],
        },
        {
          label: "商标",
          value: ["全部", "国家级", "省级", "市级", "无"],
        },
        {
          label: "排序方式",
          value: ["综合排名", "发展速度", "做强做优", "品牌建设", "科技创新"],
        },
      ],
      cData: {
        title: "企业评估分布情况",
        cLabel: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        cData: [1, 4, 2, 3, 2, 7, 2, 4, 6, 1],
        lineWidth: "30px",
      },
    };
  },
  created(){
    this.assessUrl = process.env.VUE_APP_ASSESS_URL;
  },
  methods: {
    clickTag(rows, r) {
      let focus = this.focusTag;
      let t = null;
      if (focus && focus.some((f) => f.label == rows.label)) {
        focus.map((i) => {
          if (i.label == rows.label) {
            i.val = r;
          }
          return i;
        });
      } else {
        t = {
          label: rows.label,
          val: r,
        };
        this.focusTag.push(t);
      }
      console.log(this.focusTag.findIndex((d) => d.val == r));
      t = null;
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
/deep/ input::-webkit-input-placeholder {
  color: #858ebd;
}

.col-shadw {
  .el-input {
    box-shadow: 0px 4px 12px 0px rgba(179, 192, 231, 0.24);
    border-radius: 4px;
  }
}

.fr {
  background-color: transparent;
  margin: 0 0.4rem;
}

.mt-20 {
  margin-top: 20px;
}

.label {
  color: #3a3f63;
  font-size: 0.9rem;
}

.query-container {
  .el-row {
    margin: 1rem 0;
  }

  .el-tag {
    &:hover {
      font-weight: 600;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
    }
  }
}

.query-footer {
  border-top: 1px solid #eaeaea;
  font-size: 0.8rem;

  > div {
    text-align: left;
    color: #666ea5;
    padding-top: 1rem;

    b {
      color: #409eff;
    }

    .u {
      color: #409eff;
      font-size: 0.6rem;
      cursor: pointer;
    }

    .r {
      text-decoration: underline;
      color: #999999;
      font-size: 0.6rem;
      margin-left: 20rem;
      cursor: pointer;
    }
  }
}

.tab_body {
  @include fj();
  flex-wrap: wrap;

  .tab {
    width: 100%;
    height: 105px;
    background-color: #ffffff;
    box-shadow: 0px 16px 54px 0px rgba(179, 192, 231, 0.32);
    border-radius: 8px;
    padding: 1.25rem;
  }
}
</style>
